<template>
    <div>
        <CategorySelector :isForbiddenForm="isForbiddenForm"></CategorySelector>
        <el-card class="box-card">
            <div v-if="isForbiddenForm">
                <el-button :icon="Plus" type="primary" :disabled="!categoryStore.category3Id" @click="xxx">添加属性
                </el-button>
                <el-table :data="attrList" style="width: 100%" border>
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="attrName" label="属性名称" width="180" />
                    <el-table-column prop="name" label="属性值列表">
                        <template v-slot="{ row }">
                            <el-tag v-for="item in row.attrValueList" :key="item.id" type="success"
                                style="margin-right:6px">
                                {{ item.valueName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="{ row }">
                            <el-button :icon="Edit" type="primary" size="small" title="修改属性" @click="open(row)">
                            </el-button>
                            <el-popconfirm title="确定删除分类吗?" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="removeValue(row.id)">
                                <template #reference>
                                    <el-button :icon="Delete" type="danger" size="small" title="删除属性"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div v-else>
                <el-form>
                    <el-form-item label="属性名" prop="attrInfo">
                        <el-input v-model.time="attrInfo.attrName" autocomplete="off" placeholder="请输入属性名"
                            style="width: 200px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button :icon="Plus" type="primary" @click="addAttribute">添加属性值</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="attrInfo.attrValueList" style="margin-bottom:10px;">
                    <el-table-column type="index" label="序号" width="80px" align="center" />
                    <el-table-column label="属性值名称" prop="attrValueList">
                        <template v-slot="{ row, $index }">
                            <el-input size="small" ref="inputRef" v-if="row.isShow" v-model="row.valueName"
                                @blur="deleteCurrentRow(row, $index)" @keydown.enter="deleteCurrentRow(row, $index)" />
                            <span v-else @dblclick="toEditAttrValue(row)">{{ row.valueName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row, $index }">
                            <el-popconfirm :title="`确定删除${row.valueName}吗?`" confirm-button-text="确认"
                                cancel-button-text="取消" @confirm="deleteValue($index)">
                                <template #reference>
                                    <el-button :icon="Delete" type="danger" size="small" title="删除"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-button type="primary" @click="preservation" :disabled="!attrInfo.attrValueList.length">保存
                </el-button>
                <el-button type="default" @click="isForbiddenForm = true">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
export default {
    name: 'Attr',
    components: { CategorySelector }
}
</script>
<!-- 
当三级导航没有被选中的时候下列不展示，所以直接监听第三级的id，如果发生改变则发送请求渲染页面
点击修改或添加时切换tab，可以使用v-if判断值来控制显示哪一个

attrValueList是添加页面的表格数据数组，添加属性是将输入框的内容添加到attrValueList中，点击添加之后创建数组结构，在输入框输入之后再展示
在添加之后还需要输入具体的属性值，添加完成之后展示，所以需要一个input框用来输入和一个span来进行展示

span有个双击切换成input的效果,切换之后要获取焦点

保存时要将三级id加入进去,然后正常发送请求，提示，切换即可

修改需要将当前数据传递过去，并且覆盖原本的空值
 -->

<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { useGetCategoryStore } from '@/stores/categoryList'
import { reqGetAttrListData, reqDeleteAttrValue, reqAddOrUpdateAttrInfo } from '@/api/product/attr'
import type { AttrInfoModel, AttrListModel, AttrValueInfoModel } from "@/api/product/model/attrModel"
import { ElMessage } from 'element-plus'

const categoryStore = useGetCategoryStore()
const inputRef = ref(null)
const isForbiddenForm = ref<boolean>(true)

const attrList = ref<AttrListModel>([])

// 定义一个添加属性时的属性对象
const attrInfo = reactive<AttrInfoModel>({
    attrName: '', // 要添加的属性名
    attrValueList: [], // 要添加的具体的属性值 是一个数组
    categoryId: -1, // 三级分类的id
    categoryLevel: 3 // 分类的等级 当前就设置一个3即可
})

// 发送请求的函数
const getAttrList = async () => {
    const result = await reqGetAttrListData({
        category1Id: categoryStore.category1Id,
        category2Id: categoryStore.category2Id,
        category3Id: categoryStore.category3Id
    })
    attrList.value = result
}

// 添加属性
const addAttribute = () => {
    // console.log(attrInfo.attrName);
    attrInfo.attrValueList.push({
        valueName: '',
        attrId: attrInfo.id,
        isShow: true
    })
    nextTick(() => {
        // 当页面中的数据渲染完毕之后，才让当前的输入框获取焦点
        // nextTick的执行时机，是在页面中的最后一次数据更新完成之后才会执行
        inputRef.value?.focus()
    })
}

// 添加属性值
const deleteCurrentRow = (row: AttrValueInfoModel, index: number) => {
    if (!row.valueName) {
        console.log(row.valueName);

        // 没有值不保存并且删除当行
        attrInfo.attrValueList.splice(index,)
        return
    }
    row.isShow = false
}
// 删除属性值
const deleteValue = (index: number) => {
    attrInfo.attrValueList.splice(index, 1)
}

// 双击span改为input
const toEditAttrValue = (row: AttrValueInfoModel) => {
    row.isShow = true
    nextTick(() => {
        inputRef.value?.focus()
    })
}

// 点击添加切换tab
const xxx = () => {
    isForbiddenForm.value = false
    Object.assign(attrInfo, {
        attrName: '',
        attrValueList: [],
        categoryId: categoryStore.category3Id as number,
        categoryLevel: 3
    })
}
// 点击修改切换tab
const open = (row: AttrValueInfoModel) => {
    isForbiddenForm.value = false
    Object.assign(attrInfo, row)
}

// 删除分类
const removeValue = async (id: number) => {
    await reqDeleteAttrValue(id)
    ElMessage.success('删除属性成功...')
    getAttrList()
}

// 保存
const preservation = async () => {
    attrInfo.categoryId = categoryStore.category3Id
    await reqAddOrUpdateAttrInfo(attrInfo)
    ElMessage.success('属性操作成功')
    isForbiddenForm.value = true
    getAttrList()

}
// 监听三级导航
watch(() => categoryStore.category3Id, (id) => {
    if (!id) return
    getAttrList()
}, { immediate: true })
</script>


<style>
</style>